<template>
  <el-container v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)" class="productContainer">
    <el-header height="81px">
      <div class="flex ydsl-top">
        <img src="../../static/images/logo.png" alt="">
        <div class="everyOtherOine"></div>
        <div class="ydslTitle">制品看板</div>
      </div>
    </el-header>
    <el-main class="elMain">
      <div style="height:760px;" class="">
        <el-carousel trigger="click" :autoplay="autoplay" @change="carouselChange">
          <el-carousel-item v-for="(item,pIndex) in productData" :key="item.id">
            <div class="tx-c cfff fs24" v-if="productData[pIndex].data.length == 0" style="line-height:500px;">暂无近七天制品数量</div>
            <div class="productBox" v-else>
              <div class="clear relative">
                <div class="tx-c cfff fs24">近七天制品数量</div>
                <router-link :to="'/productsList/'+item.id" class="moreList flex">更多<i class="el-icon-d-arrow-right"></i></router-link>
              </div>
              <div class="flex mgt20">
                <div class="flex1 date-item-box" v-for="(i,index) in item.data" :key="index" :class="isActive==index ? 'active' : ''" @click="activeChange(index,item.id,i.create_date)">
                  <div class="date-txt">{{ i.create_date | datafilter }}</div>
                  <div class="date-count tx-c">{{i.count}}</div>
                </div>
              </div>
              <div style="height:300px;"></div>
              <div class="product-bottom-box">
                <a href="javascript:;" class="switchBtn switchLeft" @click="scrollLeft"><img src="../../static/images/left.png"/></a>
                <a href="javascript:;" class="switchBtn switchRight" @click="scrollRight"><img src="../../static/images/right.png"/></a>
                <div class="product-bottom-main" v-scroll="onScroll"  @scroll="scrollGet($event)" ref="scrollBox">
                  <div class="clear productListBox" :style="{ width: width + 'px' }">
                    <div class="clear productListItem" v-for="(a,idx) in oneDayData" :key="idx">
                      <div v-if="(idx+1)%2 == 1">
                        <div class="parametersLine"></div>
                        <div class="bg-icon-ty dot1"></div>
                        <div class="productParametersBox">
                          <div class="parameters-txt">{{a.create_date}}</div>
                          <div class="parameters-txt">卷长：{{a.outer_length}}m</div>
                          <div class="parameters-txt">厚度：{{a.act_thickness}}um</div>
                        </div>
                      </div>
                      <div v-else>
                        <div class="parametersLine2"></div>
                        <div class="bg-icon-ty dot2"></div>
                        <div class="productParametersBox2">
                          <div class="parameters-txt">{{a.create_date}}</div>
                          <div class="parameters-txt">卷长：{{a.outer_length}}m</div>
                          <div class="parameters-txt">厚度：{{a.act_thickness}}um</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import Group from './BoardGroup.vue'
  import axios from 'axios'
  import qs from 'qs'
  import { getCookie, delCookie } from '../cookieUtil/cookieUtil';

  export default {
    name: 'Index',
    components: {
      //'v-Home': Home,
      //'v-Group': Group
    },
    filters: {
      datafilter: function (value) {
        //console.log(value);
        if (!value) return ''
        value = value.split(' ');
        return value[0];
      }
    },
    data () {
      
      return {
        autoplay:false,
        deviceId: '',
        loading: false,
        beginDate: '',
        endDate: '',
        tableData: [],
        fRowBegin: 1,
        fRowEnd: 48,
        total: 100,
        pageSize: 48,
        isActive: 0,
        productData: '',
        oneDayData: [],
        width: 900,
        position: {scrollTop: 0, scrollLeft: 0},
        current:0,
      }
    },

    created(){
      this.getProducts();
    },

    methods: {
      //退出
      exit (){
        delCookie('userId')
        this.$router.push({
          path: "/",
        });
      },
      getProducts(){
        this.loading=true;
        this.$ajax.post(this.webUrl+'/Default/productsKanban',{}).then(res => {
          console.log('status',res.status);
          if(res.status == 200){
            this.loading=false;
            console.log(res.data);
            this.productData=res.data;
            this.deviceId = res.data[0].id;
            this.beginDate = res.data[0].data[0].create_date;
            this.getOneDay();
          }
        }).catch(error => {
          console.log(error);
        })
      },
      activeChange(index,deviceId,date){
        this.isActive = index;
        this.deviceId = deviceId;
        this.beginDate = date;
        this.getOneDay();
      },
      carouselChange(val){
        console.log('carouselChange',val);
        this.current = val;
        this.oneDayData =[];
        this.deviceId = this.productData[val].id;
        if(this.productData[val].data.length > 0){
          this.beginDate = this.productData[val].data[0].create_date;
        };
        this.getOneDay();
      },
      getOneDay(){
        this.loading=true;
        this.$ajax.post(this.webUrl+'/Default/productsMoreKanban',
        {
          device: this.deviceId,
          fBeginTime: this.beginDate,
          fEndTime: this.beginDate,
          fRowBegin: -1,
          fRowEnd: -1,
        }).then(res => {
          console.log('status',res.status);
          if(res.status == 200){
            this.loading=false;
            console.log(res.data);
            this.oneDayData = res.data.data;
            this.width = parseInt(res.data.total)*120;
          }
        }).catch(error => {
          console.log(error);
        })
      },
      onScroll(e,position){
        //console.log(e);
        //console.log(position);
      },
      scrollLeft(){
        //console.log(this.$refs.scrollBox.scrollLeft);
        if(this.$refs.scrollBox[this.current].scrollLeft > 0){
          this.$refs.scrollBox[this.current].scrollLeft = this.$refs.scrollBox[this.current].scrollLeft-360;
        }
      },
      scrollRight(){
        //console.log(this.$refs.scrollBox);
        //console.log(this.$refs.scrollBox[this.current].scrollLeft);
        this.$refs.scrollBox[this.current].scrollLeft = this.$refs.scrollBox[this.current].scrollLeft+360;
      },
      scrollGet (e) {
        console.log(e.target.scrollLeft)
      }
    }
  }
</script>

<style scoped>

</style>
